<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
  <h1>v-for遍历数组</h1>
  <ul>
    <li v-for="(p,index) in persons" :key="index">
      {{p.name}}-----{{p.age}}----
      <button @click="deletep(index)">删除</button>
    </li>
  </ul>
  <h1>v-for遍历对象</h1>
  <ul>
    <li v-for="(value,key) in persons[1]" :key="index">
      {{value}}-----{{key}}----
    </li>
  </ul>
</div>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      persons: [
        {name:'Tom',age:18},
        {name:'Jack',age:13},
        {name:'Bob',age:12},
        {name:'Rose',age:15}
      ]
    },
    methods: {
      deletep(index) {
        alert(index);
        this.persons.splice(index,1);
      }
    }
  })
</script>
</body>
</html>